<template>
    <div class="main">
        <el-row :gutter="20">
            <el-col :span="6">
                <div class="widget">
                    <h2 class="widget-header">购物车(Bootstrap)</h2>
                    <div class="ct-cart">
                        <span class="ct-cart-total">{{currency(total)}}</span>
                        <ol>
                            <selected-item v-for="item in productsInCart" :product="item.product" :count="item.count" :key="item.product.id"/>
                        </ol>
                        <el-button type="success" @click="clearCart">Clear Cart</el-button>
                        <el-button type="warning">Checkout</el-button>
                    </div>
                </div>
            </el-col>
            <el-col :span="18">
                <el-row :gutter="20" v-for="group in groups" :key="group.length">
                    <el-col :span="8" v-for="product in group" :key="product.id"><item :product = 'product'/></el-col>
                </el-row>
            </el-col>
        </el-row>
    </div>
</template>

<script>
  import selectedItem from './selectedItem.vue'
  import item from './item.vue'
  import {mapState, mapGetters,mapMutations, mapActions} from 'vuex'
  import format from '@cart/js/currency.js'
export default {
      components: {
          'selected-item': selectedItem,
          'item': item
      },
      data:function () {
          return {
          }
      },
   computed: {
      groups: function () {
          let i = 0
          let groups = []
          let group = []
          this.allProducts.forEach(function (product) {
              group.push(product)
              if(i % 3 === 2){
                  groups.push(group)
                  group = []
              }

              i++;
          })

          if(group.length !==0)
              groups.push(group)

          return groups
      },
       ...mapGetters({
           productsInCart: 'productsInCart',
           allProducts: 'allProducts',
           total: 'total'
       })
   },

  methods: {
      currency: format,
      ...mapActions(['clearCart'])
  }
}
</script>

<style>
    *{
        box-sizing: border-box;
    }
    ol{
        list-style: none;
        padding: 0;
        margin: 0 0 20px 0;
    }
    .main{
        padding-top: 20px;
        width: 960px;
        margin: 0 auto;

        font-family: 'Source Sans Pro', sans-serif;
        color: #5f5f5f;
    }
    .el-row {
        margin-bottom: 20px;
        &:last-child {
             margin-bottom: 0;
         }
    }
    .el-col {
        border-radius: 4px;
    }
    .bg-purple {
        background: #d3dce6;
    }
    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }
</style>
